<template>
    <div>
        <el-dialog :visible.sync="value" fullscreen center :show-close="false">
            <template slot="title">
                <el-button v-loading.fullscreen.lock="fullscreenLoading" type="success"  @click="handleSubmit">交卷</el-button>
            </template>

            <el-timeline  v-if="data.singleList && data.singleList.length > 0">
                <el-timeline-item :color="singleAskList[index] && singleAskList[index] != '5' ? '#0bbd87' : ''" :timestamp="'第' + (index + 1) + '道单选题'"  placement="top" v-for="(single,index) in data.singleList" :key="single.id">
                    <el-card shadow="never" style="border:0rem;background-color: lightgoldenrodyellow;">
                        <template slot="header">
                            <h3 style="margin:0px 0px 20px 0px;display : inline-block">{{single.singleContent}}</h3>
                        </template>
                        <el-radio-group v-model="singleAskList[index]">
                            <el-radio label="1" style="margin:0px 0px 10px 0px">A: {{single.singleOptionA}}</el-radio><br/>
                            <el-radio label="2" style="margin:0px 0px 10px 0px">B: {{single.singleOptionB}}</el-radio><br/>
                            <el-radio label="3" style="margin:0px 0px 10px 0px">C: {{single.singleOptionC}}</el-radio><br/>
                            <el-radio label="4" style="margin:0px 0px 10px 0px">D: {{single.singleOptionD}}</el-radio><br/>
                        </el-radio-group>
                    </el-card>
                </el-timeline-item>
            </el-timeline>

            <el-timeline v-if="data.selectionList && data.selectionList.length > 0">
                <el-timeline-item :color="checkboxAskList[index] && checkboxAskList[index].indexOf('5') == -1 ? '#0bbd87' : ''" :timestamp="'第' + (index + 1) + '道多选题'"  placement="top" v-for="(selection,index) in data.selectionList" :key="selection.id">
                    <el-card shadow="never" style="border:0rem;background-color: aliceblue">
                        <template slot="header">
                            <h3 style="margin:0px 0px 20px 0px;display : inline-block">{{selection.selectionContent}}</h3>
                        </template>
                        <CheckboxGroup v-model="checkboxAskList[index]">
                            <Checkbox label="1" style="margin:0px 0px 10px 0px">
                                <span>A. {{selection.selectionOptionA}}</span>
                            </Checkbox><br/>
                            <Checkbox label="2" style="margin:0px 0px 10px 0px">
                                <span>B. {{selection.selectionOptionB}}</span>
                            </Checkbox><br/>
                            <Checkbox label="3" style="margin:0px 0px 10px 0px">
                                <span>C. {{selection.selectionOptionC}}</span>
                            </Checkbox><br/>
                            <Checkbox label="4" style="margin:0px 0px 10px 0px">
                                <span>D. {{selection.selectionOptionD}}</span>
                            </Checkbox><br/>
                        </CheckboxGroup>
                    </el-card>
                </el-timeline-item>
            </el-timeline>

            <el-timeline v-if="data.askList && data.askList.length > 0">
                <el-timeline-item :timestamp="'第' + (index + 1) + '道问答题'" placement="top" v-for="(ask,index) in data.askList" :key="ask.id">
                    <el-card shadow="never" style="border:0rem;background-color: #F2F6FC;">
                        <template slot="header">
                            <h3 style="margin:0px 0px 20px 0px;display : inline-block">{{ask.askContent}}</h3>
                        </template>
                        <el-input type="textarea" placeholder="请输入你的答案" v-model="askList[index]" style="width: 100%;height: 100%;"></el-input>
                    </el-card>
                </el-timeline-item>
            </el-timeline>

            <el-timeline>
                <el-timeline-item :timestamp="'第' + (index + 1) + '道上机题'"  placement="top" v-for="(upper,index) in data.upperList" :key="upper.id">
                    <el-card shadow="never" style="border:0rem;background-color: mistyrose;">
                        <template slot="header">
                            <el-link style="margin-left: 30px;" type="danger" :href="upper.upperUrl">下载素材</el-link>
                        </template>
                        <h3 style="margin:0px 0px 20px 0px;display : inline-block">{{upper.upperContent}}</h3>
                    </el-card>
                </el-timeline-item>
            </el-timeline>

        </el-dialog>
    </div>
</template>

<script>

    import { findExamByRedis,saveStudentExam } from '@/api/student/student-exam'

    export default {
        name:'',
        data(){
            return {
                value: false,
                fullscreenLoading:false,
                parentData:{},
                data:{},
                singleAskList:[],
                checkboxAskList:[],
                askList:[],
                timer:''
            }
        },
        watch:{
            value(data){
                if(data){
                    //加载试题数据
                    findExamByRedis(this.parentData).then(res=>{
                        if(res.data.success){
                            this.data = res.data.data;
                        }
                        //页面渲染完成后,初始化问答题答案
                        let askList = res.data.data.askList;
                        if(askList && askList.length > 0){
                            for(let i = 0 ; i < askList.length; i ++){
                                this.askList.push("");
                            }
                        }
                        //页面渲染完成后,初始化多选题答案
                        let selectionList = res.data.data.selectionList;
                        if(selectionList && selectionList.length > 0){
                            for(let i = 0 ; i < selectionList.length ; i ++){
                                this.checkboxAskList.push(["5"]);
                            }
                        }
                        //页面渲染完成后,初始化单选题答案
                        let singList = res.data.data.singleList;
                        if(singList && singList.length > 0){
                            for(let i = 0 ; i < singList.length ; i ++){
                                this.singleAskList.push("5");
                            }
                        }
                    });
                }
            }
        },
        methods:{
            supplementarySaveExam(){
                let object = {id:this.parentData.id,questionTypeIds:this.parentData.questionTypeIds};

                if(this.parentData.questionTypeIds.includes("1")){
                    object = Object.assign({singleOptions:this.singleAskList},object);
                }

                if(this.parentData.questionTypeIds.includes("2")){
                    //处理多选题数据
                    if(this.checkboxAskList && this.checkboxAskList.length > 0){
                        this.checkboxAskList.forEach(selectionArray=>{
                            if(selectionArray.length > 1){
                                selectionArray = this.splice(selectionArray);
                            }
                        })
                    }
                    object = Object.assign({selectionOptions:this.checkboxAskList.join("@")},object);
                }

                if(this.parentData.questionTypeIds.includes("3")){
                    //处理问答题
                    let arr = [];
                    if(this.askList.length > 0){
                        this.askList.forEach(item=>{
                            if(item == ""){
                                arr.push("暂无答案");
                            }else{
                                arr.push(item);
                            }
                        })
                    }
                    object = Object.assign({askOptions:arr},object);
                }

                this.fullscreenLoading = true;

                saveStudentExam(object).then(res=>{
                    this.$message({
                        type:res.data.success ? 'success':'error',
                        message:res.data.message,
                        center:true
                    });
                    this.value = false;
                    this.fullscreenLoading = false;
                    this.$router.push({name:'student-exam'});
                    this.$parent.getList(this.$parent.params);
                });

            },
            handleSubmit(){
                this.$confirm("一旦提交,则不可逆","友情提示",{type:'warning'}).then(()=>{
                    this.supplementarySaveExam();
                });
            },
            splice(arr){
                for(let i = 0 ; i < arr.length ; i ++){
                    if(arr[i] == "5"){
                        arr.splice(i,1);
                    }
                }
                return arr;
            }
        }
    }
</script>

<style>
</style>
